<template>
  <div
    style="
      min-height: 100%;
      background: linear-gradient(to bottom right, rgb(111, 247, 220), pink);
    "
  >
    <el-row style="min-height: 100%">
      <el-col :span="16" style="position: relative; min-height: 100vh">
        <img src="@/assets/3.png" alt="" />
      </el-col>
      <el-col :span="8" style="min-height: 100vh">
        <el-form
          :model="user"
          :rules="rules"
          style="
            border-radius: 10px;
            border: 4px solid rgba(255, 1, 1, 0.079);
            height: 40%;
            width: 75%;
            padding: 10px;
            margin: 220px 0 0;
          "
          ref="registerRef"
          @keyup.enter.native="register"
        >
          <div
            style="
              font-size: 20px;
              font-weight: bold;
              text-align: center;
              margin-bottom: 20px;
            "
          >
            欢迎注册乡镇农业产品信息平台
          </div>
          <el-form-item prop="username">
            <el-input
              size="medium"
              clearable
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
              v-model="user.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              size="medium"
              clearable
              show-password
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              v-model="user.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="comfirmPassword">
            <el-input
              size="medium"
              clearable
              show-password
              prefix-icon="el-icon-lock"
              placeholder="请确认密码"
              v-model="user.comfirmPassword"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%" type="warning" @click="register"
              >注册</el-button
            >
          </el-form-item>
          <div>
            已经有账号了？请
            <span
              style="color: #6e77f2; cursor: pointer"
              @click="$router.push('/login')"
              >登录</span
            >
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    // 两次密码校验
    const validatePassword = (rule, comfirmPassword, callback) => {
      if (comfirmPassword === '') {
        callback(new Error('请确认密码'))
      } else if (comfirmPassword !== this.user.password) {
        callback(new Error('两次输入的密码不一致，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      user: {
        username: '',
        password: '',
        comfirmPassword: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        comfirmPassword: [{ validator: validatePassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    register() {
      this.$refs['registerRef'].validate(valid => {
        if (valid) {
          // const userList = JSON.parse(localStorage.getItem('userList')) || []
          // if (userList.some(v => v.username === this.user.username)) {
          //   return this.$message.error('用户名已存在！')
          // }
          this.$http
            .get('/user/findByNo?no=' + this.user.username)
            .then(res1 => {
              if (res1.code != 200) {
                this.$http
                  .post('/user/save', {
                    no: this.user.username,
                    name: '未设置名称',
                    password: this.user.password,
                    roleId: '1'
                  })
                  .then(res2 => {
                    console.log(res2)
                    if (res2.code == 200) {
                      this.$message.success('注册成功，请登录！')
                      this.$router.push('/login')
                    } else {
                      this.$message.error('操作失败！')
                    }
                  })
              } else {
                return this.$message.error('用户名已存在！')
              }
            })
        } else {
          this.$message.error('注册失败！')
        }
      })
    }
  }
}
</script>

<style scoped>
img {
  display: block;
  position: absolute;
  right: -20%;
  top: 32%;
  transform: scale(1.6); /* 设置图片按照比例放大1.3倍 */
}
</style>
